<template>
	<view class="page">
		<view class="loading_css" v-if="isShow">
			<u-loading size="36" color="#FC5B03"></u-loading>
			<view>加载中</view>
		</view>
		<template v-else>
			<view class="list">
				<view style="background: #fff;border-radius: 16rpx;" v-for="(item, index) in list" :key="index" @tap.stop="goDetails(item.id, item.coupon_type)">
					<view class="list_item" >
						<view class="list_item_le">
							<view class="le_price">
								<text class="le_price_1">￥</text>
								<text class="le_price_2">{{Number(item.oprice)}}</text>
							</view>
							<view class="le_tip">部分车型最高可减免</view>
							<view class="le_title" v-if="item.status == 0 && item.coupon_type == 2">未使用</view>
							<view class="le_title" v-if="item.status == 1 && item.coupon_type == 2">已使用</view>
							<view class="le_title" v-if="item.status == 2 && item.coupon_type == 2">使用中</view>
							<view class="le_title" v-if="item.status == 3 && item.coupon_type == 2">已过期</view>
						</view>
						<view class="list_item_ri">
							<view class="ri_content">
								<view class="ri_content_1 flex justify-between">
									<view class="content_text">{{item.name}}</view>
									<view style="font-weight: 400;font-size: 30rpx;flex: 0.1;text-align: right;">x{{item.left_num}}</view>
								</view>
								<view class="ri_content_2">截止：{{item.end_at}}</view>
								<!-- <view class="ri_content_3">指定门店和车型使用</view> -->
							</view>
						</view>
					</view>
					<view class="rule_view">
						<view class="rule_top flex align-center justify-between" @tap.stop="selectRule(index)">
							<text>使用规则：</text>
							<u-icon v-if="!item.isSelect" name="arrow-down"></u-icon>
							<u-icon v-else name="arrow-up"></u-icon>
						</view>
						<view class="rule_bottom" v-if="item.isSelect">
							<view v-if="item.coupon_type == 1">指定门店和车型使用</view>
							<u-parse v-else :html="item.rule_text"></u-parse>
						</view>
					</view>
				</view>
				
			</view>
			<view class="noData" v-if="list.length == 0 && !isShow">
				<image :src='STATIC_URL+"no.png"'></image>
				<view>暂无优惠券~</view>
			</view>
		</template>
		
	</view>
</template>
<script>
	export default {
		components: {},

		data() {
			return {
				"id": "",
				"name": "",
				"list": [],
				"isShow": true,
			};
		},
		computed: {

		},
		watch: {},
		onLoad(options) {
			
		},
		onUnload() {

		},
		onReady() {

		},
		onShow() {
			this.getCouponList();
		},
		onHide() {

		},
		onResize() {

		},
		onPullDownRefresh() {

		},
		onReachBottom(e) {

		},
		onPageScroll(e) {

		},
		methods: {
			// 团购券列表  userCouponList
			getCouponList() {
				this.$api.post(global.apiUrls.userCouponList, {
					user_id: global.userInfo.user_id,
					type: 1
				}).then(res => {
					// console.log(res);
					this.isShow = false;
					if (res.data.code == 1) {
						this.list = res.data.data;
						if (this.list.length > 0) {
							this.list.forEach((v, k) => {
								v.isSelect = false;
							})
						}
					} else {
						this.$message.info(res.data.info);
					}
				})
			},
			selectRule(index) {
				this.list[index].isSelect = !this.list[index].isSelect;
				this.$forceUpdate();
			},
			goDetails(id, type) {
				if (type == 1 || type == 15) {
					uni.navigateTo({
						url: '/pages/my/myCoupon/myCouponDetail?id=' + id
					})
				} else {
					uni.navigateTo({
						url: '/pages/index/modelsList/modelsList?door_to_door=0'
					})
				}
			}
		}
	};
</script>
<style lang="scss" scoped>
	.list {
		padding: 4rpx 24rpx 16rpx;
		.list_item {
			width: 100%;
			margin-top: 20rpx;
			background: #fff;
			border-radius: 16rpx;
			display: flex;
			.list_item_le {
				width: 230rpx;
				background: rgba(252,91,3,0.05);
				text-align: center;
				padding-top: 60rpx;
				position: relative;
				.le_price {
					display: flex;
					align-items: center;
					justify-content: center;
					.le_price_1 {
						font-weight: bold;
						font-size: 30rpx;
						color: #FC5B03;
					}
					.le_price_2 {
						font-weight: bold;
						font-size: 52rpx;
						color: #FC5B03;
					}
				}
				.le_tip {
					font-weight: 500;
					font-size: 22rpx;
					color: #FC5B03;
				}
				.le_title {
					position: absolute;
					left: 0;
					top: 0;
					width: 100%;
					height: 52rpx;
					border-radius: 16rpx 0 0 0;
					background: linear-gradient(to right, #FEEDE9, rgba(252,91,3,0.01));
					font-weight: 500;
					font-size: 22rpx;
					color: #FC5B03;
					display: flex;
					align-items: center;
					padding: 0 20rpx;
					
				}
			}
			.list_item_ri {
				padding: 32rpx 24rpx 24rpx 28rpx;
				display: flex;
				flex: 1;
				.ri_content {
					// width: calc(100% - 136rpx);
					width: 100%;
					.ri_content_1 {
						font-family: PingFang SC, PingFang SC;
						font-weight: bold;
						font-size: 30rpx;
						color: #111111;
						.content_text {
							flex: 0.9;
							height: 120rpx;
							display: -webkit-box;
							-webkit-box-orient: vertical;
							overflow: hidden;
							-webkit-line-clamp: 3;
						}
					}
					.ri_content_2 {
						font-weight: 400;
						font-size: 22rpx;
						color: #666666;
						margin-top: 8rpx;
					}
					.ri_content_3 {
						font-weight: 400;
						font-size: 26rpx;
						color: #666666;
						margin-top: 20rpx;
					}
				}
				.ri_btn {
					width: 136rpx;
					height: 56rpx;
					border-radius: 80rpx;
					border: 2rpx solid #FC5B03;
					font-weight: 500;
					font-size: 26rpx;
					color: #FC5B03;
					font-family: PingFang SC, PingFang SC;
					transform: translateY(40rpx);
					
				}
			}
		}
		.rule_view {
			padding: 16rpx 0;
		
			.rule_top {
				padding: 0 24rpx;
				color: #999;
				font-size: 24rpx;
			}
		
			.rule_bottom {
				border-top: 1px solid #eee;
				padding: 16rpx 24rpx 0;
				font-size: 24rpx;
				color: #999;
				margin-top: 16rpx;
			}
		}
	}
	.personalInformation_fd1_0 {
		padding: 28rpx 0;
		border-top: 2rpx solid #eee;
	}
	
	.personalInformation_fd1_0_c0 {
		font-size: 28rpx;
		color: rgba(0,0,0,0.6);
	}
	.personalInformation_fd1_1_c1 {
		font-size: 28rpx;
		font-weight: 400;
		color: #111;
		text-align: right;
	}
	
	
	.feedback_fd4_0 {
		width: 640rpx;
		border-radius: 80rpx;
		font-size: 30rpx;
		font-weight: bold;
		color: #fff;
		margin: 0rpx 32rpx 0rpx 32rpx;
		height: 84rpx;
		line-height: 84rpx;
		text-align: center;
		background: #FC5B03;
	}
	
	.feedback_flex_4 {
		width: 750rpx;
		height: 120rpx;
		overflow: hidden;
		position: fixed;
		z-index: 10;
		bottom: calc(0rpx + var(--window-bottom));
		display: flex;
		justify-content: center;
		background: #fff;
	}
	
	
	
	
	.testExamination_fd1_0 {
		margin: 0rpx 16rpx 0rpx 0rpx;
		padding: 40rpx 32rpx 24rpx 32rpx;
	}

	.testExamination_fd1_0_c0 {
		width: 36rpx;
		height: 36rpx;
		margin: 0rpx 16rpx 0rpx 0rpx;
	}

	.testExamination_fd1_0_c1 {
		line-height: 45rpx;
		font-size: 32rpx;
		font-weight: 700;
		color: #333333;
	}

	.testExamination_notAnfd1_1_c0 {
		background: rgba(244, 250, 255, 1);
		background-size: 100% !important;
		width: 750rpx;
		height: 80rpx;
		border-radius: 40rpx 40rpx 40rpx 40rpx;
		padding: 0rpx 32rpx 0rpx 32rpx;
	}

	.testExamination_anfd1_1_c0 {
		background: rgba(244, 250, 255, 1);
		background-size: 100% !important;
		border-radius: 40rpx 40rpx 40rpx 40rpx;
		padding: 0rpx 32rpx 0rpx 32rpx;
		width: 750rpx;
		height: 80rpx;
	}

	.testExamination_areafd1_1_c0 {
		min-height: 80rpx;
		padding: 0rpx 32rpx 0rpx 32rpx;
	}

	.testExamination_notAnfd1_1_c0_c0_c0 {
		width: 36rpx;
		height: 36rpx;
		margin: 0rpx 16rpx 0rpx 0rpx;
	}

	.testExamination_notAnfd1_1_c0_c0_c1 {
		margin: 0rpx 20rpx 0rpx 0rpx;
		line-height: 45rpx;
		font-size: 32rpx;
		font-weight: 700;
		color: #1593FF;
	}

	.testExamination_notAnfd1_1_c0_c0_c2 {
		font-weight: 700;
		font-size: 32rpx;
		color: #1593FF;
		line-height: 45rpx;
		text-decoration: none;
		-webkit-line-clamp: 1;
		overflow: hidden;
		text-overflow: ellipsis;
		display: -webkit-box;
		-webkit-box-orient: vertical;
	}

	.testExamination_anfd1_1_c0_c0_c0 {
		width: 36rpx;
		height: 36rpx;
		margin: 0rpx 16rpx 0rpx 0rpx;
	}

	.testExamination_anfd1_1_c0_c0_c1 {
		margin: 0rpx 20rpx 0rpx 0rpx;
		line-height: 45rpx;
		font-size: 32rpx;
		font-weight: 700;
		color: #1593FF;
	}

	.testExamination_anfd1_1_c0_c0_c2 {
		font-weight: 700;
		font-size: 32rpx;
		color: #1593FF;
		line-height: 45rpx;
		text-decoration: none;
		-webkit-line-clamp: 1;
		overflow: hidden;
		text-overflow: ellipsis;
		display: -webkit-box;
		-webkit-box-orient: vertical;
	}

	.testExamination_areafd1_1_c0_c0 {
		border-bottom: 1px solid #eee;
		padding: 32rpx 0rpx 40rpx 0rpx;
	}

	.testExamination_areafd1_1_c0_c0_c0 {
		margin: 0rpx 0rpx 24rpx 0rpx;
	}

	.testExamination_areafd1_1_c0_c0_c0_c0_c0 {
		margin: 0rpx 0rpx 24rpx 0rpx;
	}

	.testExamination_areafd1_1_c0_c0_c0_c0_c0_c0 {
		line-height: 40rpx;
		font-size: 28rpx;
		font-weight: 400;
		color: #333333;
		margin: 0rpx 15rpx 0rpx 0rpx;
	}

	.testExamination_areafd1_1_c0_c0_c0_c0_c0_c1 {
		line-height: 40rpx;
		font-size: 28rpx;
		font-weight: 400;
		color: #333333;
	}

	.testExamination_areafd1_1_c0_c0_c0_c0_c1_c0 {
		line-height: 40rpx;
		font-size: 28rpx;
		font-weight: 400;
		color: rgba(21, 147, 255, 1);
	}

	.testExamination_areafd1_1_c0_c0_c0_c0_c1_c1 {
		line-height: 40rpx;
		font-size: 28rpx;
		font-weight: 400;
		color: #333333;
	}

	.testExamination_areafd1_1_c0_c0_c0_c0_c1_c2 {
		line-height: 40rpx;
		font-size: 28rpx;
		font-weight: 400;
		color: #333333;
	}

	.testExamination_areafd1_1_c0_c0_c0_c0_c1_c3 {
		line-height: 40rpx;
		font-size: 28rpx;
		font-weight: 400;
		color: #333333;
		margin: 0rpx 32rpx 0rpx 0rpx;
	}

	.testExamination_areafd1_1_c0_c0_c0_c0_c1_c4 {
		line-height: 40rpx;
		font-size: 28rpx;
		font-weight: 400;
		color: #333333;
	}

	.testExamination_areafd1_1_c0_c0_c0_c0_c1_c5 {
		line-height: 40rpx;
		font-size: 28rpx;
		font-weight: 400;
		color: #333333;
	}

	.testExamination_areafd1_1_c0_c0_c0_c1 {
		font-size: 26rpx;
		color: rgba(191, 191, 191, 1);
	}

	.testExamination_areafd1_1_c0_c0_c1 {
		background: rgba(242, 242, 242, 1);
		background-size: 100% !important;
		width: 602rpx;
		height: 16rpx;
		border-radius: 16rpx 16rpx 16rpx 16rpx;
		background-size: 100% auto !important;
	}

	.testExamination_progress1_areafd1_1_c0_c0_c1 {
		background: rgba(21, 147, 255, 1);
		background-size: 100% !important;
		border-radius: 10rpx 10rpx 10rpx 10rpx;
	}

	.testExamination_fd0_0 {
		padding: 0rpx 32rpx 0rpx 32rpx;
		height: 88rpx;
	}

	.testExamination_fd0_0_c0_c0 {
		font-size: 32rpx;
		font-weight: 500;
		color: #111;
	}

	.testExamination_fd0_0_c1 {
		font-size: 32rpx;
		font-weight: bold;
		color: #111111;
	}

	.testExamination_fd0_0_c2 {
		width: 36rpx;
		height: 36rpx;
	}

	.testExamination_flex_0 {
		border-bottom: 1px solid #eee;
		background: #fff;
		background-size: 100% !important;
		width: 750rpx;
		height: 88rpx;
		overflow: hidden;
		z-index: 10;
		top: 0rpx;
		background-size: 100% auto !important;
	}

	.page {
		min-height: calc(100vh - var(--window-bottom));
		background: #f6f7fb;
		background-size: 100% auto !important;
	}
</style>